<template>
	<view class="center">
		<view class="userInfo" @click="denglu">
			<view class="logo-title">
				<view class="uer-name">{{user.nickname||user.username||user.mobile||'未登录/注册'}}</view>
			</view>
			<image @click.stop="gourl('../user/user_head')" class="logo-img" :src="user.avatar || avatarUrl"></image>
		</view>
		<!-- <view class="cu-avatar round lg"
			:style="'backgroundImage:url('+ user.avatar + '?x-oss-process=image/resize,m_fixed,w_100' +')'"
			@click.stop="gourl('../user/user_head')"></view> -->
		<view class="backUserInfo">
			<view class="item" @tap.stop="navTo('/pages/user/info')">
				<image src="../../static/personal.png" mode=""></image>
				<view class="">
					个人资料
				</view>
			</view>
			<view class="item">
				<image src="../../static/history.png" mode=""></image>
				<view class="">
					历史演出
				</view>
			</view>
			<view class="item">
				<image src="../../static/resources.png" mode=""></image>
				<view class="">
					我的资源
				</view>
			</view>
			<view class="item">
				<image src="../../static/arrange.png" mode=""></image>
				<view class="">
					档期安排
				</view>
			</view>
			<view class="item">
				<image src="../../static/dongtai/address.png" mode=""></image>
				<view class="">
					我在这
				</view>
			</view>
		</view>
		<view class="addInfo">
			<view class="left" style="border-right: 2upx solid #e7e7e7;">
				<view class="" @tap.stop="navTo('/bbs/follow/follow')">
					关注：{{gridList[0].num}}
				</view>
				<view class="leftBottom" @tap.stop="navTo('/pages/add/add')">
					<image src="../../static/dongtai/clock.png" mode=""></image>
					<view class="">
						生活写真
					</view>
				</view>
			</view>
			<view class="left">
				<view class="" @tap.stop="navTo('/bbs/fans/fans')">
					粉丝：{{gridList[1].num}}
				</view>
				<view class="" @tap.stop="navTo('/bbs/fabulous/fabulous')">
					获赞：{{gridList[2].num}}
				</view>
			</view>
		</view>
		<view>
			<!-- <view class="cu-list menu-avatar">
				<view class="cu-item" @click="denglu">
					<view class="cu-avatar lg" @click.stop="gourl('../user/user_head')">
						<image style="width: 100%;height: 100%;" :src="user.avatar" mode=""></image>
					</view>
					<view class="content flex-sub">
						<view class="jiacu">{{user.nickname?'昵称：'+user.nickname:'点击登录'}}</view>
						<view class="text-gray flex justify-between">
							<view class="text-sm">金币：{{user.gold}} 积分：{{user.grade}}</view>			
							<view class="jiacu" v-if="user.username">账号：{{user.username}}</view>
						</view>
					</view>
				</view>
			</view> -->
			<!-- <uni-grid class="grid" :column="3" :showBorder="false" :square="true">
				<uni-grid-item class="item" v-for="(item,index) in gridList" @click.native="tapGrid(item)" :key="index">
					<text class="text">{{item.num}}</text>
					<text class="text">{{item.text}}</text>
				</uni-grid-item>
			</uni-grid> -->

			<view v-if="user.username==123456">
				<view class="cu-list menu sm-border margin-top">
					<view class="cu-item arrow" @click="gourl('./all')">
						<view class="content">
							<text class="cuIcon-form text-blue"></text>
							<text class="">审核删除照片(管理员功能)</text>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-list menu sm-border margin-top">
				<uni-list class="center-list" v-for="(sublist , index) in ucenterList" :key="index">
					<uni-list-item v-for="(item,i) in sublist" :title="item.title" link :rightText="item.rightText"
						:key="i" :clickable="true" :to="item.to" @click="ucenterListClick(item)" :show-extra-icon="true"
						:extraIcon="{type:item.icon,color:'#999'}">
						<view v-if="item.showBadge" class="item-footer" slot="footer">
							<text class="item-footer-text">{{item.rightText}}</text>
							<view class="item-footer-badge"></view>
						</view>
					</uni-list-item>
				</uni-list>
			</view>
		</view>
		<button class="fixedTopBottom" type="" open-type="contact">
			<uni-icons type="headphones" size="23" color="#0088cc"></uni-icons>
			<view class="">
				客服
			</view>
		</button>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		computed: {},
		data() {
			return {
				userInfo: {},
				avatarUrl: '../../static/img/Magic.png',
				pageLoad: true,
				user: {},
				unLogin: true,
				gridList: [{
						"text": "关注",
						"num": "0",
						"url": '/bbs/follow/follow'
					},
					{
						"text": "粉丝",
						"num": "0",
						"url": '/bbs/fans/fans'
					},
					{
						"text": "获赞",
						"num": "0",
						"url": '/bbs/fabulous/fabulous'
					}
				],
				ucenterList: [
					[{
						"title": '我的收藏',
						"to": '/bbs/fav/my',
						// "icon": "cuIcon-like"
						"icon": "like"
					}],
					[{
						"title": '我的照片',
						"to": '/bbs/topic/my',
						"icon": "cuIcon-form"
					}],
					[{
						"title": '我的评论',
						"to": '/bbs/comment/my',
						"icon": "cuIcon-comment"
					}],
					[{
						"title": '我的点赞',
						"to": '/bbs/comment/my',
						"icon": "cuIcon-appreciate"
					}],
					[{
						"title": '问题与反馈',
						"to": '/uni_modules/uni-feedback/pages/uni-feedback/uni-feedback',
						"icon": ""
						// "icon": "help"
					}],
					[{
						"title": '关于',
						"to": '/pages/user/about',
						"icon": ""
						// "icon": "info"
					}],
					[{
						"title": '设置',
						"to": '/pages/user/set',
						"icon": "cuIcon-settingsfill"
					}]
				]
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			if (this.isNull(this.userInfo)) {
				this.userInfo = uni.getStorageInfoSync('userInfo')
			}
			// if(this.isNull(this.user)){
			this.user = uni.getStorageInfoSync('user')
			// }
		},
		onShow: function(option) {
			this.getPage()
		},
		onHide: function() {},
		methods: {
			isNull(obj) {
				if (null == obj || undefined == obj || "" == obj || "undefined" == obj || "undefined" == typeof(obj) ||
					"null" == obj) {
					return true;
				} else {
					return false;
				}
			},

			isNotNull(obj) {
				return !this.isNull(obj);
			},
			/**
			 * 个人中心项目列表点击事件
			 */
			ucenterListClick(item) {
				if (!item.to && item.event) {
					this[item.event]();
				}
			},
			tapGrid(item) {
				// uni.showToast({
				// 	title: '你点击了，第' + (index + 1) + '个',
				// 	icon: 'none'
				// });
				uni.navigateTo({
					url: item.url
				})
			},
			denglu() {
				this.$store.dispatch('autoLogin')
			},
			gourl: function(url) {
				if (this.isNotNull(this.userInfo)) {
					uni.navigateTo({
						url: url,
					})
				}
			},
			getPage: function() {
				var that = this
				uniCloud.callFunction({
					name: "user-center",
					data: {
						"action": "get",
						id: this.userInfo._id
					},
					success: function(e) {
						var res = e.result
						if (res.error) {
							return false
						}
						// console.log(res)
						that.pageLoad = false
						that.user = res.data.user
						if (that.userInfo._id) {
							that.getInfo()
							that.getFuns()
							that.getGuanzhu()
						}
					}
				})
			},
			getFuns() {
				var that = this
				uniCloud.callFunction({
					name: "fans",
					data: {
						action: "getfans",
						params: {
							bloggerId: this.userInfo._id,
						}
					}
				}).then((res) => {
					if (res.result) {
						that.gridList[1].num = res.result
					}
				})
			},
			getGuanzhu() {
				var that = this
				uniCloud.callFunction({
					name: "fans",
					data: {
						action: "getblogger",
						params: {
							bloggerId: this.userInfo._id,
						}
					}
				}).then((res) => {
					if (res.result) {
						that.gridList[0].num = res.result
					}
				})
			},
			getInfo() {
				var that = this
				uniCloud.callFunction({
					name: "bbs_love",
					data: {
						action: "getmyfabulous",
						params: {
							bloggerId: this.userInfo._id,
						}
					}
				}).then((res) => {
					if (res.result) {
						that.gridList[2].num = res.result
					}
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url,
					fail(err) {
						uni.redirectTo({
							url: url
						})
					}
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.center {
		flex: 1;
		flex-direction: column;
		background-color: #f8f8f8;
	}

	.userInfo {
		display: flex;
		padding: 150upx 40upx 40upx;
		background-color: #0088CC;
		align-items: center;
		justify-content: space-between;
	}

	.logo-img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 150rpx;
	}

	.logo-title {
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
	}

	.uer-name {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 38rpx;
		color: #FFFFFF;
	}

	.grid {
		background-color: #FFFFFF;
		margin-bottom: 6px;
	}

	.uni-grid .text {
		font-size: 30rpx;
		height: 25px;
		line-height: 25px;
		color: #000000;
	}

	.uni-grid .item /deep/ .uni-grid-item__box {
		justify-content: center;
		align-items: center;
	}

	h1>p {
		background-color: red;
	}

	.backUserInfo {
		margin: 20upx;
		border-radius: 20upx;
		display: flex;
		align-items: center;
		text-align: center;
		background: #FFFFFF;
		margin-top: -30upx;

		.item {
			width: 20%;
			padding: 20upx 0;

			image {
				height: 50upx;
				width: 50upx;
			}
		}
	}

	.addInfo {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		text-align: center;
		margin: 20upx;
		border-radius: 20upx;
		padding: 30upx;

		.left {
			width: 50%;

			.leftBottom {
				display: flex;
				align-items: center;

				image {
					margin: 0 30upx;
					height: 50upx;
					width: 50upx;
				}
			}
		}
	}

	.fixedTopBottom {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		right: 30rpx;
		bottom: 30rpx;
		background: #fff;
		box-shadow: 0px 0px 7px 3px #f0f0f0;
		border-radius: 50%;
		z-index: 9;
		text-align: center;
		font-size: 26upx;
		padding-left: 0;
		padding-right: 0;
		line-height: 1.3;
	}
</style>
